<template>
	<view class="article-list">
		<view class="article-list-title">
			最新推荐
		</view>
		<view class="article-list-wrapper">
			<view class="article-item" v-for="(item,index) in articleList" :key="index" @click="toDetail(item.id)">
				<view class="article-info-container">
					<view class="article-title">
						{{item.title}}
					</view>
					<view class="article-secondary">
						<view class="read-count">
							<i class="iconfont icon-read-count" /> 阅读 {{item.readding}}
						</view>
						<view class="created-date">
							{{item.created_at}}
						</view>
					</view>
				</view>
				<view class="article-cover-container">
					<u-image :src="item.img" width="100%" height="100%" mode="aspectFill" />
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			articleList: {
				type: Array
			}
		},
		methods: {
			toDetail(id) {
				console.log(id)
				this.$u.route(`/pages/article_detail/articleDetail?id=${id}`);
			}
		}
	}
</script>

<style scoped lang="scss">
	@import "./articleList.scss";
</style>
